<template>
	<view class="free-medical">
		<!-- 时间轴 -->
		<time-line :processIndex="3" />
		<view class="free-medical-main">
			<image class="free-medical-main-image" :src="IMG_URL + detali.main.img" mode="aspectFill"></image>
			<view class="free-medical-main-zzc" v-if="detali.if_store == 2">免费体检仅限于线下门店领取哦～</view>
		</view>
		<!-- 报告 -->
		<view class="report-case" v-if="detali.if_store == 1">
			<view class="report-case-top">
				<text class="report-case-top-name">店长叮嘱</text>
				<view class="report-case-top-tag" :class="{ 'report-case-top-tag-active': detali.main.status == 1 }">{{ detali.main.status == 1 ? '已检查' : '待检查' }}</view>
				<button class="report-case-top-time" @click="goToPay" :disabled="detali.main.status != 1" :style="{ backgroundColor: detali.main.status != 1 ? '#C3C3C3' : '' }">
					支付尾款
				</button>
			</view>
			<view class="report-case-bottom">{{ detali.main.note }}</view>
		</view>
		<view class="report-case" v-else>
			<view class="report-case-top">
				<text class="report-case-top-name">店长叮嘱</text>
				<button class="report-case-top-time" @click="goToPay">支付尾款</button>
			</view>
			<view class="report-case-bottom">祝您和您的宠物生活愉快！</view>
		</view>
		<!-- 体检项目 -->
		<view class="medical-project-title">体检项目</view>
		<view class="medical-project-case">
			<view class="medical-project-item" v-for="(item, index) in detali.list" :key="index">
				<icon class="icon-noselect" :class="{ 'icon-select': item.status == 1 }" v-if="detali.if_store == 1"></icon>
				<text>{{ item.name }}</text>
			</view>
			<view class="medical-project-case-time">{{ detali.main.status == 1 ? detali.main.time : '检查人：店长' }}</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
import TimeLine from '../components/timeLine/timeLine.vue';
import { careList } from '@/api/buyCat.js';
import { formatTimeSecond } from '@/util/time.js';
export default {
	components: {
		TimeLine
	},
	data() {
		return {
			goods_id: '',
			detali: {},
			IMG_URL: app.globalData.IMG_URL
		};
	},
	methods: {
		async careList() {
			const res = await careList({
				goods_id: this.goods_id,
				openid: app.globalData.openid
			});
			res.main.time = formatTimeSecond(res.main.time);
			this.detali = res;
		},
		// 支付
		goToPay() {
			uni.navigateTo({
				url: `/pagesBuyCat/balancePay/balancePay?goods_id=${this.goods_id}`
			});
		}
	},
	onLoad(options) {
		this.goods_id = options.goods_id;
		this.careList();
	}
};
</script>

<style scoped lang="scss">
.free-medical {
	padding: 162rpx 30rpx 100rpx;
	.free-medical-main {
		width: 100%;
		height: 398rpx;
		border-radius: 20rpx;
		margin-bottom: 36rpx;
		overflow: hidden;
		position: relative;
		.free-medical-main-image {
			width: 100%;
			height: 100%;
		}
		.free-medical-main-zzc {
			width: 100%;
			height: 398rpx;
			line-height: 398rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.8);
			border-radius: 10px;
			color: #fa8384;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.report-case {
		padding: 30rpx 30rpx 20rpx;
		border-radius: 12rpx;
		border: 2rpx solid #f1f1f1;
		margin-bottom: 20rpx;
		.report-case-top {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			.report-case-top-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
				margin-right: 16rpx;
			}
			.report-case-top-tag {
				width: 100rpx;
				height: 40rpx;
				background: rgba(250, 131, 132, 0.2047);
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #ff6465;
				line-height: 40rpx;
				text-align: center;
			}
			.report-case-top-tag-active {
				width: 100rpx;
				height: 40rpx;
				background: rgba(41, 207, 114, 0.2047);
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #29cf72;
				line-height: 40rpx;
				text-align: center;
			}
			.report-case-top-time {
				width: 140rpx;
				height: 56rpx;
				background: #fa8384;
				border-radius: 12rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #ffffff;
				margin: 0;
				padding: 0;
				margin-left: auto;
			}
		}
		.report-case-bottom {
			font-size: 28rpx;
			color: #666666;
			line-height: 44rpx;
		}
	}
	.medical-project-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
		margin-bottom: 20rpx;
	}
	.medical-project-case {
		padding: 24rpx 30rpx;
		background: #f2f2f2;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: -30rpx;
		.medical-project-item {
			display: flex;
			align-items: center;
			&:not(:last-child) {
				margin-bottom: 30rpx;
			}
			.icon-noselect {
				width: 24rpx;
				height: 24rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-medical-select-no.png) no-repeat;
				background-size: cover;
				margin-right: 24rpx;
			}
			.icon-select {
				width: 24rpx;
				height: 24rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-medical-select.png) no-repeat;
				background-size: cover;
				margin-right: 24rpx;
			}
			& > text {
				flex: 1;
			}
		}
		.medical-project-case-time {
			font-size: 28rpx;
			color: #999999;
			line-height: 44rpx;
			margin-top: 28rpx;
		}
	}
}
</style>
